<template>
  <div class="_wz_certificateCriterionList">
    <Spin size="large" fix v-if="tableLoading"></Spin>
    <div style="width: 100%;height: 100%;display: flex; align-items: center;color: #515a6e;font-size: 12px;" v-if="tableData.length < 1">
      <div style="margin:auto;">暂无数据</div>
    </div>
    <template v-for="item,index in tableData">
      <div class="_wz_certificateCriterionList_cent" :class="{_wz_certificateCriterionList_cent_select : active.uuid == item.uuid}" @click="selectData(item)" :key="item.id">
        <div class="_wz_certificateCriterionList_cent_div">
          <div :class="item.certificateState == 1?'_wz_type_color_39a4ff':'_wz_type_color_ff1f2e'" :data-sub="item.certificateState == 1?'已生效':'已逾期'" style="position: absolute;width: 85px;height: 85px;overflow: hidden;top: 0px;left: 0px;"></div>
          <div class="_wz_certificateCriterionList_cent_top">
            <div class="_wz_certificateCriterionList_cent_top_left">
                <img :src="!!item.certificateImg?apiUrl.imgUrl+item.certificateImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_certificateCriterionList_cent_top_right">
              <div class="_wz_certificateCriterionList_cent_top_right_div">
                <span class="_wz_plateNumber " @click="vehicleDetailsFun(item)" style="font-weight: 900;">
                  <span class="_wz_vehiclePlateColor">{{!!item.certificateNo ? item.certificateNo : '--'}}</span>
                  <!--                  <Icon type="ios-eye" />-->
                </span>
<!--                <span style="float: right;color: #2d8cf0;cursor: pointer;" @click="vehicleDetailsFun(item)">详情</span>-->
              </div>
              <div class="_wz_certificateCriterionList_cent_top_right_div" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                {{!!item.certificateLevel?item.certificateLevel == 1?'一级':item.certificateLevel == 2?"二级":"三级": '--'}}
              </div>
              <div class="_wz_certificateCriterionList_cent_top_right_div">{{!!item.certificateType ? item.certificateType : '--'}}</div>
              <div class="_wz_certificateCriterionList_cent_top_right_div">{{!!item.certificateMold ? item.certificateMold : '--'}}</div>
            </div>
          </div>
          <div class="_wz_certificateCriterionList_cent_bottom">
            <div class="_wz_certificateCriterionList_cent_bottom_div">发证日期：{{!!item.certificateReleaseDate ?item.certificateReleaseDate:'--'}}</div>
            <div class="_wz_certificateCriterionList_cent_bottom_div">截至日期：{{!!item.certificateDueDate ?item.certificateDueDate:'--'}}</div>
          </div>
          <div class="_wz_certificateCriterionList_cent_bottom">
            <div>运输机构：{{!!item.deptName ? item.deptName : '--'}}</div>
            <div>颁发机构：{{!!item.certificateIssueName ? item.certificateIssueName : '--'}}</div>
          </div>
        </div>

      </div>
    </template>
  </div>
</template>
<script>
    export default {
        props: ["tableData", "tableLoading"],
        data() {
            return {
                active: {},
            }
        },
        beforeCreate() {//beforeCreate创建前状态

        },
        created() {//created创建完毕状态

        },
        beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

        },
        mounted() {//mounted 挂载结束状态

        },
        methods: {//执行的方法
            selectData(data) {
                this.$emit("getSelectData", data)//菜单点击数据传输 现在地址上页面
                this.active = data;
            },
            //查看详情
            vehicleDetailsFun(data) {
                this.$emit("vehicleDetailsFun", data)//菜单点击数据传输 现在地址上页面
            },
            //人员绑定
            personnelBinding(data) {
                this.$emit("personnelBinding", data)//菜单点击数据传输 现在地址上页面
            },
            //挂车绑定
            hangBindingFun(data) {
                this.$emit("hangBindingFun", data)//菜单点击数据传输 现在地址上页面
            },
            //
            vehicleListFun(name) {
                let that = this;
                if (name == 'personnelBinding') { //人员绑定
                    that.personnelBinding(that.active);
                } else if (name == 'trailerBinding') { //挂车绑定
                    that.hangBindingFun(that.active);
                } else if (name == 'vehicleDetails') { //车辆详情
                    that.vehicleDetailsFun(that.active);
                }
            },
            //获取最后位置和时间
            accessLocate(data) {
                var that = this;
                //运输企业
                that.axios.post(that.apiUrl.webApi + "/position/position", {carPlateNo: data.carPlateNo}).then(res => {
                    if (!!res) {
                        that.$set(data, 'position', '');
                        data.position = res.data.data;
                    }
                }).catch(err => {
                    console.log("失败", err)
                })
            }
        },
        watch: {//监听
            tableData(news, old) {
                this.active = {};
            }
        },
        beforeUpdate() {//beforeUpdate 更新前状态

        },
        updated() {//updated 更新完成状态

        },
        beforeDestroy() {//beforeDestroy 销毁前状态

        },
        destroyed() {//destroyed 销毁完成状态

        }
    }
</script>
<style lang="less">
  ._wz_certificateCriterionList {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 0 20px 0;

    ._wz_certificateCriterionList_cent {
      box-shadow: 0 1px 4px #d8d8d8;
      color: #666;
      float: left;
      border: 1px solid #fff;
      border-top: 2px solid #dcdee2;
      margin: 20px 0px 0px 20px;
      cursor: pointer;
      width: 450px;
      height: 273px;

      ._wz_type_color_39a4ff:before {
        content: "";
        display: block;
        width: 120px;
        height: 120px;
        border-style: solid;
        border-color: transparent #39a4ff transparent transparent;
        border-width: 30px;
        position: absolute;
        top: -60px;
        left: -60px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 1;
      }

      ._wz_type_color_ff1f2e:before {
        content: "";
        display: block;
        width: 120px;
        height: 120px;
        border-style: solid;
        border-color: transparent #ff1f2e transparent transparent;
        border-width: 30px;
        position: absolute;
        top: -60px;
        left: -60px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 1;
      }

      ._wz_type_color_39a4ff:after {
        content: attr(data-sub);
        position: absolute;
        top: 23px;
        left: 13px;
        z-index: 2;
        color: #fff;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
        font-size: 12px;
      }

      ._wz_type_color_ff1f2e:after {
        content: attr(data-sub);
        position: absolute;
        top: 23px;
        left: 13px;
        z-index: 2;
        color: #fff;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
        font-size: 12px;
      }

      ._wz_certificateCriterionList_cent_div {
        padding: 10px;
        position: relative;

        ._wz_certificateCriterionList_cent_top {
          ._wz_certificateCriterionList_cent_top_left {
            float: left;
            height: 170px;
            width: 65%;

            img {
              width: 100%;
              height: 100%;
            }
          }

          ._wz_certificateCriterionList_cent_top_right {
            padding: 0 0 0 10px;
            width: 35%;
            float: left;

            ._wz_certificateCriterionList_cent_top_right_div {
              height: 30px;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
            }

          }
        }

        ._wz_certificateCriterionList_cent_bottom {
          clear: both;
          line-height: 30px;
          height: 30px;
          ._wz_certificateCriterionList_cent_bottom_div {
            float: left;
            width: 50%;
          }

          div{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    ._wz_certificateCriterionList_cent_select {
      border: 1px solid #d8d8d8;
      border-top: 2px solid #2d8cf0;
      background: #f2f2f2;
    }
  }


</style>
